<template>
  <div class="m-PropContent">
    <ul class="_propList">
      <li>
        <span class="_name">名称</span>
        <span class="_type">类型</span>
      </li>
      <li v-for="(item, index) in props.nodeData.propList" :key="index">
        <span class="_name"
              :class="{ isDragOver: dragIndex === index }"
              title="sadsad"
              draggable="true"
              @dragend="handleDragEnd"
              @dragstart="handleDragStart(index, $event)">图标+{{ item.label + 1 }}</span>
        <span class="_type">{{ item.type }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, watchEffect, reactive, onMounted, onBeforeUnmount, PropType, getCurrentInstance } from "vue";
const props = defineProps({
  nodeData: {
    type: Object,
    default: {}
  }
});
const dragIndex = ref(-1);
// 开始拖拽 通知文本编辑器是来自属性的拖拽，并把数据带过去
const handleDragStart = (index:number, e:any) => {
  dragIndex.value = index;
};
const handleDragEnd = () => {
  dragIndex.value = -1;
};
</script>

<style lang="scss" scoped>
.m-PropContent {
  ._propList {
    li {
      display: flex;
      padding: 5px 15px;
      ._name {
        width: 250px;
        padding-right: 15px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .isDragOver {
        color: red;
      }
    }
    li:first-child {
      height: 20px;
      background: wheat;
    }
  }
}
</style>
